<style scoped>
.category_title{
    font-size: 30px;
    margin-left: 5%;
    margin-right: 5%;
    border-bottom: 2px rgb(11, 235, 243) dotted;
}
.main_top{
    margin-left: 5%;
    margin-right: 5%;
    display: flex;
    flex-direction: row;
    height: 80px;
}
.main_top div{
    font-size: 30px;
    display: flex;
    align-items: center;
    margin-right: 20px;
}
.tab_color{
    color: gainsboro;
}
.tab_choose_color{
    color: skyblue;
}
</style>
<template>
    <div>
        <v-nav-top/>
        <div class="category_title">{{$route.params.catid}}</div>
        <div class="main_top">
            <div @click="changeItems(item.name, index)" v-for="(item,index) in product_list" :key="index" :class="(tab_index===index)?'tab_choose_color':'tab_color'">{{item.name}}</div>
        </div>
        <v-Productmodule ref="itemModel" :catid="$route.params.catid"/>
    </div>
</template>

<script>
import nav from "@/components/nav";
import Productmodule from "@/components/product/Productmodule"

export default {
    name : 'category',
    components: {
        'v-nav-top': nav,
        'v-Productmodule':Productmodule
     },    
    data() {
        return {
            product_list:[],
            tab_index: -1,
        }
    },
    mounted(){
        this.getProducts();
    },
    methods: {
        getProducts(){
            this.$Axios({
                method: 'get',
                url: '/catalog/products',
                params:{
                    category: this.$route.params.catid
                }
            }).then(res=>{
                this.product_list = res.data.data;
                console.log(this.product_list);
            }).catch(error=>{
                this.$message.error("其他服务器错误"+error);
            })
        },
        changeItems(id,index){
            this.tab_index = index;
            this.$refs.itemModel.changeItems(id);
        }
    }
}
</script>